<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../vue.global.js"></script>
</head>

<body>
    <!-- {{counter}} 插值表达式 counter渲染组件数据 -->
    <div id="app">Counter: {{ counter }}</div>

    <script>

        // 声明根组件
        const Counter = {
            // 数据闭包
            data() {
                // 这里是真正的数据
                return {
                    counter: 0
                }
            },

            // 组件挂载完毕时回调
            mounted() {
                // 每秒更新数据
                setInterval(

                    // 无参无返回值箭头函数
                    () => {
                        //此处的this指的是Counter组件实例
                        this.counter++
                    },


                    1000
                );
            }
        }

        // 基于根组件创建Vue应用程序实例
        const app = Vue.createApp(Counter)

        // 将应用实例挂在到指定DOM下
        app.mount("#app")

    </script>
</body>

</html>